<template>
  <div style="margin-left: 20px">
    <h1>护士列表</h1>
    <div>
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="护士">
          <el-input v-model="search.title" placeholder="请输入护士名" />
        </el-form-item>
        <el-form-item label="护士等级">
          <el-select v-model="search.type" placeholder="请选择护士等级">
            <el-option label="全部" value="全部" />
            <el-option label="初级护士" value="初级护士" />
            <el-option label="中级护师" value="中级护师" />
            <el-option label="高级护士长" value="高级护士长" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadData">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="nurses">
        <el-table-column fixed prop="nid" label="编号" width="100" />
        <el-table-column prop="name" label="护士名" width="220" />
        <el-table-column prop="gender" label="性别" width="120" />
        <el-table-column prop="age" label="年龄" width="200" />
        <el-table-column prop="phone" label="手机号" width="200"/>
        <el-table-column prop="title" label="护士等级" width="200"/>
        <el-table-column prop="ctime" label="入职时间" width="200"/>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="openUpdate(scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="del(scope.row.nid,scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="float: right;margin-right: 30px;margin-top: 20px">
      <el-pagination background layout="prev, pager, next" :total="total" />
    </div>
    <div>
      <el-dialog title="修改护士信息" :visible.sync="dialog">
        <el-form :model="nurse" label-width="120px">
          <el-form-item label="编号">
            <el-input v-model="nurse.nid" :disabled="true"/>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="nurse.name" />
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="nurse.gender" label="男">男</el-radio>
            <el-radio v-model="nurse.gender" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="nurse.age"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="nurse.phone"></el-input>
          </el-form-item>
          <el-form-item label="护士等级">
            <el-select v-model="nurse.title" placeholder="请选择用户的角色" :disabled="true">
              <el-option label="初级护士" value="初级护士" />
              <el-option label="中级护师" value="中级护师" />
              <el-option label="高级护士长" value="高级护士长" />
            </el-select>
          </el-form-item>



        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" @click="update">确 定 修 改</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data(){
    return{
      nurses:[],
      total:10,
      search:{
        type:"",
        title:"",
        page:1,
        size:10
      },
      nurse:{},
      dialog:false
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      //请求接口 axios get 键值对
      request({
        // ?type="+this.search.type+"&title="+this.search.title+"&page="+this.search.page+"&size="+this.search.size,
        url: "api/nurse/all.do",
        method: 'get',
        params: this.search
      }).then(res => {
        console.log(res);
        if (res.code == 0) {
          this.nurses = res.data.list;
          this.total = res.data.size;
        }
      })
    },
    del(mid, index) {
      var msg = "您真的确定要删除吗？\n\n请确认！";
      if (confirm(msg)==true) {
        //请求接口 删除数据
        request({
          url: "api/nurse/del.do",
          method: 'post',
          data:{nid: nid}
        }).then(res => {
          if (res.data.code == 0) {
            this.questions.splice(index, 1)
          }
        })
      }
    },
    openUpdate(obj) {
      this.medication=obj;
      this.dialog=true;
    },
    update() {
      //请求接口 修改数据
      request({
        url: "api/medication/update.do",
        method: 'post',
        data: this.medication
      }).then(res => {
        if (res.code == 0) {
          this.dialog = false;
          this.loadData();
        }
      })
    }
  }
}

</script>

<style scoped>

</style>
